<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网上书城</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: "Microsoft YaHei", sans-serif;
            color: #333;
            background-color: #fff;
            line-height: 1.6;
        }
        /* 顶部区域 */
        #top {
            background-color: #fff;
            padding: 10px 0;
            text-align: left;
        }
        #top .logo {
            margin-left: 20px;
        }
        #top .logo img {
            vertical-align: middle;
        }
        #top .logo span {
            font-size: 18px;
            color: #333;
            margin-left: 5px;
        }
        #top .top-links {
            float: right;
            margin-right: 20px;
            margin-top: 5px;
        }
        #top .top-links a {
            color: #0066cc;
            text-decoration: none;
            margin-left: 10px;
            font-size: 14px;
        }
        /* 菜单区域 */
        #menu {
            background-color: #006633;
            padding: 8px 0;
        }
        #menu ul {
            list-style: none;
            text-align: center;
        }
        #menu ul li {
            display: inline-block;
            margin: 0 8px;
        }
        #menu ul li a {
            color: #fff;
            text-decoration: none;
            font-size: 14px;
        }
        #menu ul li a:hover {
            text-decoration: underline;
        }
        #menu ul li a.highlight {
            color: #ffcc00;
        }
        /* 搜索区域 */
        #search {
            background-color: #e6e6c8;
            padding: 10px 0;
            text-align: right;
            margin-right: 20px;
        }
        #search input[type="text"] {
            padding: 5px;
            border: 1px solid #ccc;
            border-radius: 3px;
            width: 180px;
        }
        #search input[type="button"] {
            padding: 5px 12px;
            background-color: #009933;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-left: 5px;
        }
        /* 内容区域 */
        #content {
            max-width: 900px;
            margin: 20px auto;
            background-color:#FFFDDD ;
            padding: 0 20px;
        }
        .breadcrumb {
            text-align: right;
            margin-bottom: 10px;
            font-size: 13px;
            color: #666;
        }
        .breadcrumb a {
            color: #0066cc;
            text-decoration: none;
        }
        .category-title {
            font-size: 16px;
            color: #333;
            margin: 10px 0;
            padding-bottom: 5px;
            border-bottom: 1px solid #ccc;
        }
        .product-list {
            margin: 15px 0;
        }
        .product-list .product-item {
            display: inline-block;
            width: 23%;
            margin-right: 2%;
            text-align: center;
            vertical-align: top;
            margin-bottom: 20px;
        }
        .product-list .product-item img {
            max-width: 100%;
            height: auto;
        }
        .product-list .product-info {
            font-size: 13px;
            color: #666;
            margin-top: 5px;
        }
        .pagination {
            text-align: center;
            margin: 20px 0;
        }
        .pagination a, .pagination span {
            display: inline-block;
            padding: 3px 8px;
            margin: 0 2px;
            border: 1px solid #ccc;
            text-decoration: none;
            color: #333;
        }
        .pagination span.current {
            background-color: #006633;
            color: #fff;
            border: 1px solid #006633;
        }
        /* 底部区域 */
        #bottom {
            background-color: #f5f5dc;
            padding: 15px 0;
            text-align: center;
            font-size: 13px;
            color: #666;
            margin-top: 20px;
        }
        #bottom .logo {
            vertical-align: middle;
            margin-right: 5px;
        }
        #bottom span {
            vertical-align: middle;
        }
    </style>
</head>
<body>
<!-- 顶部区域 -->
<div id="top">
    <div class="logo">
        <img alt="logo" src="images/logo.png">
    </div>
    <div class="top-links">
        <a href="#">购物车</a>
        <a href="#">帮助中心</a>
        <a href="#">我的账户</a>
        <a href="#">新用户注册</a>
    </div>
</div>

<!-- 菜单区域 -->
<div id="menu">
    <ul>
        <li><a href="#">文学</a></li>
        <li><a href="#">生活</a></li>
        <li><a href="#">计算机</a></li>
        <li><a href="#">外语</a></li>
        <li><a href="#">经管</a></li>
        <li><a href="#">励志</a></li>
        <li><a href="#">社科</a></li>
        <li><a href="#">学术</a></li>
        <li><a href="#">少儿</a></li>
        <li><a href="#">艺术</a></li>
        <li><a href="#">原版</a></li>
        <li><a href="#">科技</a></li>
        <li><a href="#">考试</a></li>
        <li><a href="#">生活百科</a></li>
        <li><a href="#" class="highlight">全部目录商品</a></li>
    </ul>
</div>

<!-- 搜索区域 -->
<div id="search">
    <input type="text" placeholder="Search">
    <input type="button" value="搜索">
</div>

<!-- 内容区域 -->
<div id="content">
    <div class="breadcrumb">
        <a href="#">首页</a> &gt; <a href="#">旅游</a> &gt; 图书列表
    </div>
    <h2 class="category-title">商品目录</h2>
    <p class="category-title">计算机类 共100种商品</p>

    <div class="product-list">
        <div class="product-item">
            <img alt="book" src="bookcover/101.jpg">
            <div class="product-info">
                书名: xxx<br>
                售价: xxx
            </div>
        </div>
        <div class="product-item">
            <img alt="book" src="bookcover/102.jpg">
            <div class="product-info">
                书名: xxx<br>
                售价: xxx
            </div>
        </div>
        <div class="product-item">
            <img alt="book" src="bookcover/103.jpg">
            <div class="product-info">
                书名: xxx<br>
                售价: xxx
            </div>
        </div>
        <div class="product-item">
            <img alt="book" src="bookcover/104.jpg">
            <div class="product-info">
                书名: xxx<br>
                售价: xxx
            </div>
        </div>
        <div class="product-item">
            <img alt="book" src="bookcover/105.jpg">
            <div class="product-info">
                书名: xxx<br>
                售价: xxx
            </div>
        </div>
        <div class="product-item">
            <img alt="book" src="bookcover/106.jpg">
            <div class="product-info">
                书名: xxx<br>
                售价: xxx
            </div>
        </div>
        <div class="product-item">
            <img alt="book" src="bookcover/107.jpg">
            <div class="product-info">
                书名: xxx<br>
                售价: xxx
            </div>
        </div>
        <div class="product-item">
            <img alt="book" src="bookcover/108.jpg">
            <div class="product-info">
                书名: xxx<br>
                售价: xxx
            </div>
        </div>
    </div>

    <div class="pagination">
        <a href="#">上一页</a>
        <span class="current">1</span>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">下一页</a>
    </div>
</div>

<!-- 底部区域 -->
<div id="bottom">
    <img class="logo" alt="logo" src="images/logo_small.png">
    <span>CONTACT US<br>copyright 2008 &copy; BookStore All Rights RESERVED</span>
</div>
</body>
</html>